
<!--
系统管理-系统日志页面
@author： hejie
-->

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/vue.js"></script>
    <script type="text/javascript" src="static/js/index.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
    <script th:src="@{static/js/axios.min.js}"></script>
    <script th:src="@{static/js/qs.min.js}"></script>
    <title>Document</title>
</head>


<style>
    .el-table .warning-row {
        background: rgb(126, 238, 35);
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    /*
    包裹表格div的距離外邊距的距離
    width:85% 為寬度
    margin：為左边距
    margin-top為右边距
    */

    #app {
        width: 100%;

    }
</style>

<body>

<!--3.div：第3个div开始-->
<!--“搜索”、“导出”：根据用户名、职位、手机号、状态、角色来搜索-->
<div id="app">
    <!--<div id="appso">-->
    <el-row class="demo-autocomplete">
        <el-col :span="2">操作用户</el-col>
        <el-col :span="6">
            <el-autocomplete
                    class="inline-input"
                    v-model="findSystemLogInfo.userInfo_userName"
                    size="small"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    @select="handleSelect"
            ></el-autocomplete>
        </el-col>

        <el-col :span="2"> 执行时间</el-col>
        <el-col :span="6">
            <el-autocomplete
                    class="inline-input"
                    v-model="findSystemLogInfo.excuteTime"
                    size="small"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容:yyyy/MM/dd"
                    :trigger-on-focus="true"
                    @select="handleSelect"
            ></el-autocomplete>

        </el-col>

        <el-col :span="2">执行结果</el-col>
        <el-col :span="6">
            <el-select v-model="findSystemLogInfo.executeResult" placeholder="请选择" size="small">
                <el-option label="---" value="0"></el-option>
                <el-option label="失败" value="-1"></el-option>
                <el-option label="成功" value="1"></el-option>
            </el-select>
        </el-col>

        <br/><br/><br/>
        <el-col :span="6">
            <el-button type="primary" icon="el-icon-search" size="small" @click="findWhenLoad()">查询</el-button>
            <el-button type="primary" icon="el-icon-download" size="small" @click="exportList()">导出</el-button>
            <el-button type="danger" icon="el-icon-delete" size="small" @click="batch_delete()">批量删除</el-button>
        </el-col>

    </el-row>


    <!--<div id="app">-->
    <!--1.表格-->
    <!--table 模板  ：data 绑定了数据 tableData-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%;font-size: 10px"
                :row-class-name="tableRowClassName"
                :header-cell-style="{'text-align':'center'}"

                ref="multipleTable"
                tooltip-effect="dark"
                @selection-change="handleSelectionChange">

                :cell-style="{'text-align':'center'}" >
            <el-table-column
                    type="selection"
                    align="center"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="userInfo.userName"
                    label="操作用户"
                    align="center"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="excuteTime"
                    label="执行时间"
                    align="center"
                    :formatter="dateFormatter"
                    width="160">
            </el-table-column>
            <el-table-column
                    prop="operation"
                    label="操作"
                    align="center"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="requestMethod"
                    label="请求方法"
                    align="center"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="excuteTimeConsume"
                    label="执行时长(毫秒)"
                    align="center"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="ip"
                    label="IP地址"
                    align="center"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="executeResult"
                    :formatter="statusFormatter"
                    label="执行结果"
                    align="center"
                    width="80">
            </el-table-column>
            <el-table-column
                    label="操作"
                    align="center"
                    width="80">
                <template slot-scope="scope">
                    <!--handleClick 为点击查看点击事件,括号内的scope.row为当前行的所有参数,要拿什么参数,直接 scope.row参数名-->
                    <el-button type="text" size="small" @click="dialogFormVisible = true,systemLogInfo_detail(scope.row)" >详情</el-button>
                </template>
            </el-table-column>
        </el-table>


        <!-- @size-change：绑定每页数据size，并刷新数据  -->
        <!-- @current-change:绑定当前页码，并刷新数据  -->
        <!--@size-change="handleSizeChange"-->
        <el-pagination
                v-if="!noResult&&!error"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        layout="total,prev, pager, next, jumper"
        :total="total">
        </el-pagination>

    </template>

    <!--2.操作——“详情”，弹出模态框-->
    <el-dialog title="日志详情" :visible.sync="dialogFormVisible">
        <el-form :model="form" :inline="true">
            <el-form-item label="请求方法：" :label-width="formLabelWidth">
                <span>{{form.request_method}}</span>
            </el-form-item>
            <br>
            <el-form-item label="请求参数：" :label-width="formLabelWidth">
                <span>{{form.request_param}}</span>
            </el-form-item>
            <br>
            <el-form-item label="执行结果：" :label-width="formLabelWidth">
                <span v-if="form.execute_result== 1" >成功</span>
                <span v-else="form.execute_result== 0" >失败</span>
            </el-form-item>
            <br>
            <el-form-item label="错误信息：" :label-width="formLabelWidth">
                <span>{{form.error_info}}</span>
            </el-form-item>
            <br>
            <el-form-item label="错误堆栈：" :label-width="formLabelWidth">
                <span>{{form.error_stack}}</span>
            </el-form-item>
        </el-form>
    </el-dialog>

</div><!--第3个div结束-->

<!--对应第1个div-->
<script type="text/javascript" th:inline="javascript">
    <!--页面加载完毕后,把后端查询的数据显示在table中-->
    window.onload=function () {
        demo.findWhenLoad();
    }


    <!--1.div：“搜索”、“导出”：根据用户名、职位、手机号、状态、角色来搜索。table-->
    /**table中的数据*/
        //数据
    let datas = {
            goods: [
                {
                    excuteTime: '2020/12/10',
                    operation: '添加渠道',
                    requestMethod: 'com.huiying.p2ploansystem.publicsubsystem.controllers.Base_AttachmentController.getCategoryiesbyClassificationId()',
                    excuteTimeConsume:5,
                    ip:'192.168.6.2',
                    executeResult:'成功'
                }
            ]
        };

    var demo = new Vue({
        el: "#app", //绑定的div
        data() {
            return {
                //tableData是表格中的数据。  datas.goods是为了后端查询数据为空时有一个数据
                tableData: datas.goods,  //  datas数据 中的数组goods
                multipleSelection: [],//被选择的 行（table中被选则的行）
                delarr:[],//被删除行的id
                dialogFormVisible: false,  //这是点击编辑之后，原本隐藏的 编辑框就变为true，就显示编辑框
                form:{      //这个是查看里面的form表单，以下是表单要修改的内部的字段名
                    request_method:'',//请求方法
                    request_param: '',//请求参数
                    execute_result: '',//执行结果
                    error_info: '',//错误信息
                    error_stack: ''//错误堆栈
                },
                formLabelWidth: '120px',

                // total,
                //搜索的关键字
                findSystemLogInfo:{
                    userInfo_userName:null,//操作用户的名字
                    // excuteTime:'2020/12/09',//执行时间
                    excuteTime:null,//执行时间
                    executeResult:null//执行结果
                },
                //当前的页码
                currentPage:1,
                total:1,//总页数
                noResult:'',
                error:'',

                //原来属于appo的数据
                restaurants: [],
                state1: '',
                state2: ''
            };
        },
        methods: {
            //提示：成功的信息message
            success_msg(message) {
                this.$message({
                    message: message,
                    type: 'success'
                });
            },
            //checkbox（为了批量选中，删除）
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //为鼠标移动上去的js样式
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                    return 'success-row';

                } else if (rowIndex % 2 === 2) {
                    return 'warning-row';
                }
                return '';
            },

            // 日期格式化
            dateFormatter (row, column) {
                //excuteTime
                let datetime = row.excuteTime;
                if(datetime){
                    datetime = new Date(datetime);
                    let y = datetime.getFullYear() + '-';
                    let mon = datetime.getMonth()+1 + '-';
                    let d = datetime.getDate() +' ';
                    let hourTemp=datetime.getHours();
                    if (hourTemp<10){
                        hourTemp='0'+hourTemp;
                    }
                    let hour = hourTemp+':';
                    let minuteTemp=datetime.getMinutes();
                    if (minuteTemp<10){
                        minuteTemp='0'+minuteTemp;
                    }
                    let minute = minuteTemp+':';
                    let secondTemp=datetime.getSeconds();
                    if (secondTemp<10){
                        secondTemp='0'+secondTemp;
                    }
                    let second = secondTemp;
                    return y + mon + d+ hour+ minute+ second;
                }
                return ''
            },

            // 禁用状态格式化
            statusFormatter(row, column) {
                let status = row.executeResult;
                if(status === 0){
                    return '失败'
                } else {
                    return '成功'
                }
            },
            //我在pom.xml中引入了“jackson-databind”包
            //点击“导出”，把当前Tabledata通过json方式传递到后端（后端把数据写为一个Excel文件）
            exportList:function (){
                //转换一下，提交转换后的对象
                function TableDataBeanTemp(){};
                let tableDataBeanTemp=new TableDataBeanTemp();
                // tableDataBeanTemp.simpleFileNameUserSet="测试系统日志是否可以使用simpleFileNameUserSet";
                tableDataBeanTemp.simpleFileNameUserSet=null;
                tableDataBeanTemp.tableDataJson=demo.tableData;
                let tableDataBean=JSON.stringify(tableDataBeanTemp);
                axios.post([[@{systemLog/exportList}]],tableDataBean,{headers:
                        {'Content-Type':'application/json;'}
                })
                .then((response)=>{
                    console.log(response);
                    if (response.data.code == 200){
                        demo.success_msg("导出成功，请到系统管理-下载中心进行下载");
                    }
                })
                .catch((err)=>{console.log(err)});
            },

            //执行“批量删除”
            batch_delete:()=>{
                //执行批量删除
                console.log("在batch_delete（）中")

                //弹框询问
                demo.$confirm('此操作将永久删除该选中的日志, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        // 多选删除
                        const length = demo.multipleSelection.length;

                        for (let i = 0; i < length; i++) {
                            // console.log(this.multipleSelection[i])
                            demo.delarr.push(demo.multipleSelection[i].id);
                            console.log(demo.delarr[i]);
                        }
                        //是否能 tableData[]中删除  delarr[]--还是后端查询、在刷新吧
                        //所有被删除的的id数组
                        let ids=demo.delarr;
                        axios.delete([[@{/systemLog/}]] + ids).then(res => {
                            console.log(res);
                            if(res.data.code == 200){
                                // demo.success_msg("删除成功");
                                alert("删除成功");
                                console.log("app.rows="+app.rows);
                                //从数组中移除元素
                                // app.rows.splice(index,1);
                                location.reload();
                            }
                        }).catch(function (error) {
                            console.log(error);
                        });
                    })
                    .catch(() => {
                        demo.$message({
                            type: 'info',
                            message: '已取消删除'

                        });
                    });
            },

           /* del : (id,index)=>{
                axios.delete([[@{/user/}]] + id).then(res => {
                    console.log(res);
                    if(res.data.code == 200){
                        console.log(app.rows);
                        //从数组中移除元素
                        app.rows.splice(index,1);
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            }*/


            //  这里一点击翻页就会重新去查询数据，所以这里因该是给查询条件赋值，而不是给pagination赋值
            //  后台我们已经将数据分号了页，pagination会自根据后台返回的分页数据给自己的属性变量赋值

            // 当前的页码，改变时会触发
            handleCurrentChange:function (currentPage) {
                demo.currentPage=currentPage;
                demo.findWhenLoad();
            },

            //分页查询数据：把后端的数据，显示在table上
            findWhenLoad() {
                console.log("in findWhenLoad02");
                let executeResultRaw=null;
                if (this.findSystemLogInfo.executeResult==-1){
                    executeResultRaw=0;
                }else if (this.findSystemLogInfo.executeResult==1){
                    executeResultRaw=1;
                }

                let excuteTimeRaw=this.findSystemLogInfo.excuteTime;
                if (this.findSystemLogInfo.excuteTime==''){
                    excuteTimeRaw=null;
                }

                console.log("executeResultRaw="+executeResultRaw);
                axios.get([[@{systemLog/page}]],{
                    params:{
                        //搜索的关键字
                        //     excuteTime: this.findSystemLogInfo.excuteTime,
                            excuteTime: excuteTimeRaw,
                            executeResult: executeResultRaw,
                            pageNum : this.currentPage,
                            userInfoUserName:this.findSystemLogInfo.userInfo_userName
                    }
                })
            .then(res => {//此处一定要用 箭头函数  不然this 就不是this
                    console.log("res="+res);
                    this.total = res.data.total;
                    this.tableData = res.data.list;
                    console.log("this.tableData[0].excuteTime="+this.tableData[0].excuteTime);
                    /*this.noResult = false
                    if (this.total === 0) {
                        this.noResult = true
                    }
                    this.error = false
                    this.loading = false*/
                })
                .catch(error => {
                    console.log(error);
                });
            },

            //点击表格中某一行的“详情后”，在 弹出的对话框中填充数据
            systemLogInfo_detail:(systemLogInfo)=>{
                console.log("systemLogInfo.requestMethod="+systemLogInfo.requestMethod);
                console.log("systemLogInfo.requestParam="+systemLogInfo.requestParam);
                console.log("systemLogInfo.executeResult="+systemLogInfo.executeResult);
                console.log("systemLogInfo.errorInfo="+systemLogInfo.errorInfo);
                console.log("systemLogInfo.errorStack="+systemLogInfo.errorStack);

                //教训：一定是demo.   不要写  this.
                demo.form.request_method=systemLogInfo.requestMethod;
                demo.form.request_param=systemLogInfo.requestParam;
                demo.form.execute_result=systemLogInfo.executeResult;
                demo.form.error_info=systemLogInfo.errorInfo;
                demo.form.error_stack=systemLogInfo.errorStack;
            },

            //删除某一行的数据：之前 在不是夏谆谆的table中，测试过可以使用
            /* del : (id,index)=>{
                 axios.delete([[@{/user/}]] + id).then(res => {
                     console.log(res);
                     if(res.data.code == 200){
                         console.log(app.rows);
                         //从数组中移除元素
                         app.rows.splice(index,1);
                     }
                 }).catch(function (error) {
                     console.log(error);
                 });
             }*/

            //"查看"的点击事件 line=scope.row,当前行的所有参数
            handleClick(line) {
                alert(line.id);
            },
            // del:function(id){
            //     this.tableData.splice(id,1);
            // },
            //删除，点击删除之后，给后台指令，后台回到前端页面刷新页面。
            del: function (id) {
                alert(id);
                this.tableData.splice(id, 1);
                let that = this
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {

                    this.$http("删除操作的路径名" + id)//“”+接上删除的id值
                        .then(function (respDate) {
                            if (respDate.data == "success") {
                                that.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                that.toPage(that.currentPage);
                            } else {
                                that.$message({
                                    type: 'error',
                                    message: '删除失败!'
                                });
                                that.toPage(that.currentPage);
                            }
                        })
                })
                    .catch(() => {
                    this.$message({

                        type: 'info',
                        message: '已取消删除'

                    });
                });
            },//删除方法截止


            //原来属于appo中的方法
            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            loadAll() {
                return [
                    {"value": "", "address": "天山西路389号"},
                    {"value": "", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13"}
                ];
            },
            handleSelect(item) {
                console.log(item);
            }
        },//method方法截止

        //查询所有的角色，用来做<option>
        created : function () {
        },
        mounted() {
            this.restaurants = this.loadAll();
        }
        // 局部过滤器，仅针对当前  组件（#app <div>）有效
        /*filters:{
            dateYMDHMSFormat:date=>{
              let d=  new date;
              d.get
                return date.toLocaleLowerCase();
            }
        }*/
    });

    //分页还没写======


</script>



<!--分页？-->
<div id="paging">

</div>




</body>


</html>